React – Add A Separate File In Project

Your React JSX code can be placed in a separate file.

Let’s render a special button instead of the default react logo like https://www.weiy.city/2024/08/react-run-your-project-and-see-the-effect/ in our web page.

We design the style for the button in a separate file Button.js

var myStyle = {
  fontSize: 100,
  color: '#FF0000'
};
export default function Button() {
  return <button style={myStyle}>weiy.cc</button>;
}

Then import it in App.js and use it.

import Button from "./Button"

export default function App() {
  return <Button/>
}

Here is a new result for the original project.

You can try it in the our sandbox.