{"id":27370213,"url":"https://github.com/datastaxdevs/react-basics","last_synced_at":"2025-07-05T19:37:00.020Z","repository":{"id":104795923,"uuid":"383821104","full_name":"datastaxdevs/react-basics","owner":"datastaxdevs","description":"A quick overview of React Basics","archived":false,"fork":false,"pushed_at":"2021-07-22T21:55:24.000Z","size":17022,"stargazers_count":33,"open_issues_count":1,"forks_count":29,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-06-17T09:02:47.751Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/datastaxdevs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-07-07T14:10:38.000Z","updated_at":"2021-12-18T06:36:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"f6a7e9ee-02ab-44a5-bbd5-d2133e751460","html_url":"https://github.com/datastaxdevs/react-basics","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/datastaxdevs/react-basics","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datastaxdevs%2Freact-basics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datastaxdevs%2Freact-basics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datastaxdevs%2Freact-basics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datastaxdevs%2Freact-basics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/datastaxdevs","download_url":"https://codeload.github.com/datastaxdevs/react-basics/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/datastaxdevs%2Freact-basics/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263795369,"owners_count":23512666,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-04-13T08:48:19.836Z","updated_at":"2025-07-05T19:37:00.015Z","avatar_url":"https://github.com/datastaxdevs.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"[\u003c-- Back to Main](https://github.com/datastaxdevs/appdev-week1-todolist/blob/main/README.md#6-launch-gitpod-ide)\n\n# Setup Basic App - Create React App\n\n## Step 1 - Start in a clean environment\n- Click the button to launch the GitPod IDE.\n\n[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/datastaxdevs/react-basics/)\n\n\n## Step 2 - create-react-app\n\nCreate React App is a fantastic tool to spin up a basic React App with all necessary dependencies.\n\n✅ **Step 2a:** Run `npx create-react-app my-app`\n\n✅ **Step 2b:** Run `cd my-app`\n\nAnd that's it! We now have a basic React App. We can go ahead and run the app right away.\n\n✅ **Step 2b:** Run `npm start`\n\n![Image](/tutorial/app_basic.png)\n\nAs the message states, we can make changes to `App.js` to update the page. Let's make a few changes.\n\n✅ **Step 2c:** Edit `src/App.js`\n``` javascript\nimport logo from './logo.svg';\nimport './App.css';\n\nfunction App() {\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cheader className=\"App-header\"\u003e\n        \u003cimg src={logo} className=\"App-logo\" alt=\"logo\" /\u003e\n        \u003cp\u003e\n          Hello World!\n        \u003c/p\u003e\n      \u003c/header\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\nSo we've removed some unnecessary links, and changed the text. Let's save and update the site.\n\n![Image](/tutorial/app_helloWorld.png)\n\nCool right?\n\nFor our Todo App, we are going to want to have a list of Todos, so let's go over making a new component.\n\n\n## Step 3 - Basic Component\n- Create a folder, `src/components`\n- Create a new file, `src/components/List.js`\n\n✅ **Step 3a:** Edit `List.js`\n``` javascript\nimport React from 'react'\n\nfunction List() {\n    return (\n        \n    );\n}\n\nexport default List;\n```\n\nHere's our basic component. We are importing our necessary `React` library, defining our `List` component, and exporting it for use in `App.js`.\n\nLet's think about this a bit. We are going to have a list of items, so let's define an array to hold that list, and make up some entries.\n\n``` javascript\nconst itemList = [\"Get milk\", \"Buy Amazon\", \"Take over the world\"];\n```\n\nNow let's render this list by mapping each item in the array to a `\u003cp\u003e` tag.\n\n✅ **Step 3b:** Edit `List.js`\n``` javascript\nimport React from 'react'\n\nfunction List() {\n    const itemList = [\"Get milk\", \"Buy Amazon\", \"Take over the world\"];\n\n    return (\n        itemList.map((item) =\u003e (\n            \u003cp\u003e{item}\u003c/p\u003e\n        ))\n    );\n}\n\nexport default List;\n```\n\nGreat! We've created our first custom component! Now we need to import it into `App.js` and use it.\n\n✅ **Step 3c:** Edit `App.js`\n``` javascript\nimport logo from './logo.svg';\nimport './App.css';\n\nimport List from './components/List';\n\nfunction App() {\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cheader className=\"App-header\"\u003e\n        \u003cimg src={logo} className=\"App-logo\" alt=\"logo\" /\u003e\n        \u003cList /\u003e\n      \u003c/header\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\nNow save, and reload the site.\n\n![Image](/tutorial/app_withList.png)\n\nAwesome! But that's just the start. We can make our component more dynamic using `props`.\n\n## Step 4 - Component Props\n\nOkay, so we have our `List.js` component, but it's not very dynamic. It just takes the array we specified and spits out each item as text. We can move the array out of the `List` component and provide it as a `prop` instead.\n\n✅ **Step 4a:** Edit `List.js`\n``` javascript\nimport React from 'react'\n\nfunction List(props) {\n    const { itemList } = props;\n\n    return (\n        itemList.map((item) =\u003e (\n            \u003cp\u003e{item}\u003c/p\u003e\n        ))\n    );\n}\n\nexport default List;\n```\n\nNow our `List` component is going to be looking for a `prop` called `itemList` that contains an array. We will provide that prop when we use the component.\n\n``` javascript\n\u003cList itemList={[\"Get milk\", \"Buy Amazon\", \"Take over the world\"]}/\u003e\n```\n\nLet's add this to `App.js`.\n\n✅ **Step 4b:** Edit `App.js`\n``` javascript\nimport logo from './logo.svg';\nimport './App.css';\n\nimport List from './components/List';\n\nfunction App() {\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cheader className=\"App-header\"\u003e\n        \u003cimg src={logo} className=\"App-logo\" alt=\"logo\" /\u003e\n        \u003cList itemList={[\"Get milk\", \"Buy Amazon\", \"Take over the world\"]}/\u003e\n      \u003c/header\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\nWhat this allows us to do is reuse our `List` component for any given array. Let's add another `List` component.\n\n``` javascript\n\u003cList itemList={[\"Get bread\", \"Get eggs\"]} /\u003e\n```\n\n![Image](/tutorial/app_2lists.png)\n\nNow our component is dynamic! All we need to do is get a list of items as an array, and we can use our component to list the items out.\n\n...But we can go deeper\n\n## Step 5 - Going Deeper\n\n![deeper](/tutorial/deeper.gif)\n\nLet's make another new component\n\n✅ **Step 5a:** Create `src/components/Item.js`\n``` javascript\nimport React from 'react';\n\nfunction Item(props) {\n    const { item } = props;\n\n    return (\n        \u003cp\u003e{item}\u003c/p\u003e\n    );\n}\n\nexport default Item;\n```\n\nAnd import and use this component in place of `\u003cp\u003e{item}\u003c/p\u003e` in our `List` component.\n\n✅ **Step 5b:** Edit `List.js`\n``` javascript\nimport React from 'react';\nimport Item from './Item';\n\nfunction List(props) {\n    const { itemList } = props;\n\n    return (\n        itemList.map((item) =\u003e (\n            \u003cItem item={item} /\u003e\n        ))\n    );\n}\n\nexport default List;\n```\n\nNow we have an `Item` component that we can customize. For example, we can give the item a different background when the user mouses over.\n\n✅ **Step 5c:** Edit `Item.js`\n``` javascript\nimport React from 'react';\n\nfunction Item(props) {\n    const { item } = props;\n    const [bg, setBg] = React.useState('');\n\n    const handleMouseOver = () =\u003e {\n        setBg('red');\n    }\n    const handleMouseOut = () =\u003e {\n        setBg('');\n    }\n\n    return (\n        \u003cp \n            onMouseOver={handleMouseOver} \n            onMouseOut={handleMouseOut} \n            style={{backgroundColor: bg}}\n        \u003e\n            {item}\n        \u003c/p\u003e\n    );\n}\n\nexport default Item;\n```\n\n![item](/tutorial/app_customItem.gif)\n\nOr we can add input to each item.\n\n✅ **Step 5d:** Edit `Item.js`\n``` javascript\nimport React from 'react';\n\nfunction Item(props) {\n    const { item } = props;\n    const [isChecked, setIsChecked] = React.useState(false);\n\n    return (\n        \u003cdiv\u003e\n            \u003cinput\n                type=\"checkbox\"\n                checked={isChecked}\n                onChange={() =\u003e setIsChecked(true)}\n            /\u003e\n            \u003clabel\u003e{item}\u003c/label\u003e\n        \u003c/div\u003e\n    );\n}\n\nexport default Item;\n```\n\n![item](/tutorial/app_inputItem.gif)\n\n\nVoila!\n\n## Step 5 - State\n\nWait. There's some extra stuff in there. What is this `React.useState()` stuff!?!\n\nBefore we talk about State, let's briefly talk about how React renders things.\n\n###  Rendering\n\nOk, so by now you should be familiar with the `return()` block. In our latest version of `Item.js` it looks like this:\n\n``` javascript\nreturn (\n    \u003cdiv\u003e\n        \u003cinput\n            type=\"checkbox\"\n            checked={isChecked}\n            onChange={() =\u003e setIsChecked(true)}\n        /\u003e\n        \u003clabel\u003e{item}\u003c/label\u003e\n    \u003c/div\u003e\n);\n```\n\nThis contains the HTML that is injected into the virtual DOM when this component is used. However, this is initially done when the component first 'mounts' or initilizes and that's it. *Unless* there is a `prop` or `state` change. So in the case of our `Item.js` component. If the `item` prop is updated from the parent component, it will trigger a re-render. But what if we don't want to rely on the parent component updating the `prop`? We can use `state`.\n\nSo in the case of our `Item.js` component. We want to re-render the component whenever the checkbox is checked, so we can actually see the checked checkbox. For this we are using a `state` variable called `isChecked` and we initialize it like this:\n\n``` javascript\nconst [isChecked, setIsChecked] = React.useState(false);\n```\n\nThis is called a React Hook. Hooks are built in methods that we can use to do certain things, in this case create and manage a state variable.\n\nSo how does it work?\n\nWell, the `useState()` hook takes an array of 2 variables, the first will be our state variable - `isChecked` and the second will be the function we use to update that state variable - `setIsChecked`. Then we initialize the `useState()` hook with the variable's initial value, in this case `false` since the checkbox will start out unchecked.\n\nNow when we call  `setIsChecked(true)` whenever the checkbox changes, the state variable will change to true, triggering a re-render and making our checkbox checked.\n\n[\u003c-- Back to Main](https://github.com/datastaxdevs/appdev-week1-todolist/blob/main/README.md#6-launch-gitpod-ide)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatastaxdevs%2Freact-basics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdatastaxdevs%2Freact-basics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatastaxdevs%2Freact-basics/lists"}