We will now learn how to create a React project and host the repo in GitHub
Create React App is a CLI tools that help you to create a project with all the required configurations for a typical React applications, e.g. webpack, Babel, and ESLint.
To create the project for our app, in your CLI, go to the directory that you want to create the project, and run the following command:
bashnpx create-react-app react-movie-app
- the command will create a folder
react-movie-appand install all the required dependencies for your project. Have fun waiting :)
npmutility that allows you to run CLI tools conveniently. Without
npx, you need to run 2 commands:bashnpm install -g create-react-appcreate-react-app react-movie-app
After the command finish running, go into the folder and open it with VS code:
bashcd react-movie-appcode .
You should see the project structure as below:
Run the following command in the CLI, and your browser should open with the default Create React App application:
Now that we've created the project, it's always good practice to host your repo somewhere instead of just on your PC, as you would never know when your PC will give you a surprise.
We will host our repo in GitHub.
Create a new repo in GitHub (via this link or click the New button in your GitHub profile).
Name the repo as "react-movie-app" (or something else if you wish). Click "Create Repository" button.
Follow the "...push an existing repository from the command line" instruction on the page by running the command in your
react-movie-appfolder. It should be something like this:bashgit remote add origin https://github.com/malcolm-kee/react-movie-app.gitgit push -u origin master
Refresh the GitHub page. You should be able to see your code is available at the GitHub repo now.
Now that we have a project, let's move our code to this project.
- Include our html code into
- Replace the content of
src/index.jswith our code within the
scripttag. Remove all imports except
ReactDOMimports. If you don't know what these imports statements are, no worries, I'll explain them shortly.
- Delete all the files in
Now when you run
npm start the application should be as per before.
Commit your code and push to your GitHub repo.
bashgit add .git commit -m "transfer code to project"git push