When it comes to creating your first React project, there are lots of templates that you can use for this course. We will use Wheat as it is well maintained and easy to get started. For beginners that want to focus on Core React principles to create a new wheat application, open up the terminal and execute NPM, create Wheat at latest, and then we provide a name for our project. Here we are calling our project demo. Now we itself can be used for development with a lot of different frameworks because we are going to be using React. We have to provide the template for React, and specifically for this course we are going

to be using TypeScript because that will provide a much better developer experience within our IDE. This will only take a few seconds to execute and then we'll provide you the next steps to complete your setup. So let's follow through the steps. We will see the into the demo directory and run NPM install. This will install React and any of the dependencies that we need in order to use this template to continue playing around with this template. Let's open it up. Within our IDE, there are a number of files within this template that we can explore, but the first one that we will take a look at is package.

Jason, within this file is the script section, which contains various commands that we can use to control this project for a development workflow. This script that we will use is dev, so we open up the terminal and execute NPM Run Dev. This starts our development server and we can see a URL that is printed out to see our application in action. Let's open up this URL within our browser here you can see what this template application looks like and feel free to play around with it if you want. But the key thing that I want you to focus in on is that we can edit Source App TSX to modify

what we are seeing on screen. So let's jump back and open up this file. Within our IDE, there is a lot of code already present within this file, so let's simplify it so that we can focus in on Learning Core React. Now in order to create a truly bare bones project with Minimum Noise, we will start off by getting rid of any CSS customizations. First up, we will delete the import for app CSS and then we will delete that file from our folder structure. The other file that is providing some CSS customization is css.

You can see that it is being imported from the main TSX file, so we delete the import for that from Main TSX and then delete Index CSS from the file system. With the CSS customizations removed, let's modify App TSX to make it even simpler. We get rid of the imports that we do not need for a bare bones application. We get rid of the use State hook, which is something that we will cover in a future lesson, and then within the return statement, we get rid of everything that is currently there and return a simple dev that contains the text. Hello fam, because we are already running the dev server

using NPM Run Dev, the application will be modified and live reloaded within the browser. So within the browser, the application has already reloaded and contains the simple dev that we just returned from our main Application component. That's the basics of running this application for development, but let's take it a step further and look at how we can build it for production. Within the package to Jason file, which we looked at in the start of this lesson, there is another script called Build. This can be used to build the application so that it can be deployed to production. We open up the terminal and execute NPM Run Build.

This creates a dis folder, which contains all of the assets that we can push to some hosting provider so that our application can be viewed by our users. We can actually see what our production application would look like even without deploying it to a hosting provider by running a web server from our machine. A simple web server that we can use is Serve, which is provided on NPM, and we can execute it by running NPX Serve and providing a production folder, which is called dis. This starts a local production web server that serves our application on Port 3000, so we can see

what our application would look like in production by visiting this URL. And as you would expect, our production application looks exactly like what it did during development with our development setup complete. I want to reiterate that for a large portion of this course, we will be focusing on React, and it doesn't really matter which particular template you are using as you will be able to copy the code that exists within App SX into any React application. Honestly, it's actually quite impressive how easy it is to get started with React, especially considering that it is such an in-demand skill.

In the next lesson, we will continue our React journey and explore the powerful features that this framework has to offer.