Lesson #1 - React
React can be used to build modern web applications for desktop or mobile platforms.
React projects are comprised of components.
Components are the fundamental building blocks we'll use when creating our React applications. They display data, listen for user input, and act based upon that input.
We'll go much, much further in depth with React during class, but today we'll be building our first React application.
Assignment
For this assignment, we'll be creating a basic React project inside a git repository called, prework-React.
In order to do this assignment, be sure that you've installed Node.js.
Start by first navigating to your git repository in your terminal.
Once there, type the following command:
npx create-react-app my-app
This will install the React dependencies. It's what will build our project skeleton for us.
You will be prompted for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key.
Change your directory to the new React project.
cd my-app
Once there, type the following command:
npm start
Your browser should automatically open and display a Welcome image. If it doesn't, you can go to your new app manually by going to http://localhost:3000 in Google Chrome.
STOP. Take a breath. You just created a React project!
Now that we have a React app up and running, let's customize it a little bit.
In VS Code, open the app.js file found inside of the my-app/src/ directory.
Change the content of what's in the <p> property from my-app to anything your heart desires. If you can't think of anything, feel free to go with something routine like My First React App.
Your browser should automatically refresh and show your new title.
Awesome work! Now that your project works, let's connect our project files to a new Git repository.
First, to close your React application in your terminal, press ctrl-c. Now, we want to remove our node_modules directory.
node_modules is the directory where all of the files that React relies on upon to run live. This directory can get huge, and we don't want to push this to our repository.
To remove the node_modules, enter the command rm -rf node_modules in your terminal.
Next, create a new Github repository called, prework-React. Initialize this repository without a README.md.
Go back into your terminal and navigate to the root folder of your project.
Now you'll need to initialize your local files for Git, create a connection to your new repository, and create a remote using the following commands:
git init
git commit -m "first commit"
git remote add origin
As a note, the remote command is how we set up our local files to communicate and sync with repositories stored on Git.
Submission
To submit this assignment, you'll be submitting a link to your prework-React GitHub repository in Bootcampspot! Be sure to submit this link under the assignment, "Pre-work: React" in Bootcamptspot.
If you have any issues submitting your prework, check out this video for step-by-step instructions on how to do so! Prework Submission Video
Congrats! You made it! This is the end of your pre-work!