Create React App

JSX is very important for React, but it's not a standard feature of Javascript (and likely never will be). Because of this, you need a tool to 'build' your project, so that you can write React code using JSX.

Create React App is a tool which you can use to write React websites which use JSX.

Create React App uses Webpack under the hood, it takes all your .js files and 'inlines' (merges) them into one big file.

What Create React App does

It builds your code, processes it, and puts it into a folder with a single index.html, javascript, css and images.

How it does this, and the details of what it's doing are unfortunately not very transparent.

• yarn start runs Create React App in dev mode you can open http://localhost:3000 in your browser to see your site, the page will refresh as you make changes.

• yarn build builds the site into the ./build folder for production use.

Importing other file types

Create React App allows you to import more than just javascript. You can import .css and .svg files for example.

To import other file types you can say: import './App.css'

Try not to eject

Create React App comes with the functionality to eject to Webpack. In my experience this is usually a bad idea.

Getting started with Create React App

I recommend using this seed project I've prepared: https://github.com/functioncamp/create-react-app-seed, there are instructions on how to get started with it on your computer in the readme.

If you'd rather do it via a website: you can use the seed on replit. Just fork the project, click the 'shell' tab and run yarn install and then yarn start (it can be slow...!)