Getting Started with React

Congratulations for starting your journey with React! React is a JavaScript framework that helps take care of HTML manipulation and helps to compartmentalize your code. For large projects, I recommend using React as it takes care of a lot of tedious problems and allows you to spend time on coding the application logic. This wiki page aims to give you the instructions to get everything set up so that you can start coding your own React applications for LibreTexts!

First-time setup of NodeJS and cloning the repository

React is different from vanilla JS in that you must develop the code on your computer as React has to be compiled before it is used.

1. First, clone this repository to your computer using Git, Github Desktop, or some other Git client.
2. If you don't have it already set up, download NodeJS and install it on your computer. You should download the LTS (recommended) version unless otherwise instructed. This should also install NPM, which is used to manage dependencies within NodeJS.
3. Within the public/Miscellaneous directory of the cloned repository, use the command line to run npm install and then npm update. This will install some dependencies required for compiling React.

Looking at NewReactTemplate and starting your own React Project

I am made a NewReactTemplate project for you to use as a starting template for your own project!

1. In the cloned repository, copy public/Henry Agnew/NewReactTemplate to your own user folder.
2. In what is now public/{{your name}}/NewReactTemplate, you can rename NewReactTemplate to something that is representative of your project.
3. You can open the test.html file in your browser to see the example React project in action! Note that within the html it is calling the compiled bundle.js and is also calling a CSS file. When you React project gets implemented into a webpage, these two lines of HTML are all that is needed to get your code running within LibreTexts!

Playing with the NewReactTemplate

Now that you've seen the example, you are almost ready to begin coding!

1. Within your public/{{your name}}/NewReactTemplate or renamed project directory, use the command line to run npm install and then npm update. This will install React onto your computer for this project. It will also install the other dependencies listed in the package.json.
2. Now, make some slight modification to the index.js file, which is the entrypoint for your React project. Index.js contains a bit of extra code in order to inject your code into the webpage, but the majority consists of a React Hook function that generates what you see in the test.html file!
3. When ready, use the command line to run npm run package. This will run the "package" command I've defined within the package.json, which in turn calls the public/Miscellaneous/createBundle.js code that we set up earlier.
4. Refresh your test.html in the browser, and you should see your changes!
5. Within the components directory of your new React project, notice that I've defined SubComponent.jsx as another React Hook. Plan on breaking your project into focused Components and treat it almost like object-oriented programming! This will keep your application logic contained and will allow you to easily reuse code.

Managing your dependencies using the Node Package Manager (NPM)

One of the most powerful aspects of using React is the ability to import other libraries and have them bundled with your code. With the NewReactTemplate, you are already doing this with React as you must bundle the React library for the code to work! You can find many interesting packages available to you at https://www.npmjs.com/. Feel free to experiment, though we do have some tips to ensure you only keep the packages you need.

Tips for searching for packages

1. My most reliable method for finding a package is Googling "npm react XXXX", and Google usually does a good job of finding a popular package.
2. When looking at an NPM package on npmjs.com, ALWAYS check the last published date. The older the code is, the more likely it has security vulnerabilities due to how fast JavaScript is evolving.
3. When looking at an NPM package, keep in mind the package's popularity based on its "Weekly Downloads". More popular projects are more likely to continue to be supported in future versions of React.
4. Ask others on the team what packages they would use to solve the problem. Who knows, they may already have an awesome package that they find works well and solves your problems!
5. As of writing, Henry's most used package is @material-ui/core as it takes care of so much of the UI/UX and leaves me more time to focus on coding the inner logic.

Common npm commands

While there are many guides on the internet about how to use npm, here is a brief guide on the most common npm commands you will use.

Command	Function
npm install [package name]	Installs a package into package.json
npm remove [package name]	Removes a package from package.json
npm update	Updates all packages in package.json
npm prune	Removes any packages that are installed but not listed in package.json
npm run [script]	Runs a script as defined in package.json

Beta Testing your React applications

Pushing to Production

Like the other projects which