Create React App

What is create-react-app and Why are we going to use it?

From its website, they define create-react-app as a comfortable environment for learning React, and is the best way to start building a new single-page application in React.

It sets up our development environment so we can use the latest JavaScript features, provides a nice developer experience, and optimizes our App for production. We'll need to have node >= 8.10 and npm >= 5.6 in our machine.

What does it includes?

1.- Webpack: A static module bundler for modern JavaScript applications.
2.- Webpack Dev Server: To run a local environment.
3.- Babel: For transpiling our files to work on the targets we choose.
4.- ESLint: For error checking and help you to format code.
5.- Jest: A testing library!

How to create a Project?

npx create-react-app my-app
cd my-app
npm start

Folder Stucture

So as a result, create-react-app will create a project with the next structure:

1.- node_modules: This is the folder in which all the dependencies are installed, it's generated when we run the create-react-app or the npm install command.
2.- public: contains 3 files, usually we would only make a few changes in the index.html file
3.- src: The folder in which we will be working, the starting point of our react application is the index.js where we specify the root component which is App.js.
4.- .gitignore: a list of folders/files that don't want to include in our repo when we push our code.
5.- package-lock.json: ensure consistent installation in our dependencies.
6.- package.json: Contains the dependencies and scripts requried for the project.
7.- README.md: We include information related to the project, sometimes the steps to run it, test it, etc.

That was a pretty short introduction to our structure, we will come back to them in next lessons.