How to assemble my three reactJS files in order to put them in codePen?

Hello,

This is my Index.js:

import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

And this my App.js:

import React from 'react';
import './App.css';
import { sampleText } from './sampleText';
import { marked } from 'marked';
//import DOMPurify from 'dompurify';

class App extends React.Component {
  state = {
    text: sampleText,
  };

  handleChange = (event) => {
    const text = event.target.value;
    this.setState({ text });
  };

  //renderText = (text) => DOMPurify.sanitize(marked(text));
  renderText = (text) => marked(text);
  // On souhaite que les modifications soient enregistrée dans le LocalStorage
  // du navigateur. Ainsi si l'utilisateur rafréchit la page, ses modifications
  // seront sauvegarder.

  // On sauvegarde les modifications
  componentDidUpdate() {
    const { text } = this.state;
    localStorage.setItem('text', text);
  }

  // On réaffiche la sauvegarde lorsque l'App est relancée par le rafréchissement.
  // s'il y à eu du text sauvegardé, je rafiche ce text.
  // Si tout à été supprimé, je remets le sampleText de départ.
  componentDidMount() {
    const text = localStorage.getItem('text');
    if (text) {
      this.setState({ text });
    } else {
      this.setState({ text: sampleText });
    }
  }
  // Vidéo - Anthony Welc - Ch 03 - 05  Du Markdown avec Marked, time 03:44
  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-sm-6">
            <textarea
              onChange={this.handleChange}
              className="form-control"
              rows="35"
              value={this.state.text}
            ></textarea>
          </div>
          <div className="col-sm-6">
            <div
              dangerouslySetInnerHTML={{
                __html: this.renderText(this.state.text),
              }}
            ></div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

And the third “sampleText”:

export const sampleText = `# Welcome to my React Markdown Previewer!

## This is a sub-heading...
### And here's some other cool stuff:

Heres some code, \`<div></div>\`, between 2 backticks.

\`\`\`
// this is multi-line code:

function anotherExample(firstLine, lastLine) {
  if (firstLine == '\`\`\`' && lastLine == '\`\`\`') {
    return multiLineCode;
  }
}
\`\`\`

You can also make text **bold**... whoa!
Or _italic_.
Or... wait for it... **_both!_**
And feel free to go crazy ~~crossing stuff out~~.

There's also [links](https://www.freecodecamp.org), and
> Block Quotes!

And if you want to get really crazy, even tables:

Wild Header | Crazy Header | Another Header?
------------ | ------------- | -------------
Your content can | be here, and it | can be here....
And here. | Okay. | I think we get it.

- And of course there are lists.
  - Some are bulleted.
     - With different indentation levels.
        - That look like this.


1. And there are numbered lists too.
1. Use just 1s if you want!
1. And last but not least, let's not forget embedded images:

![freeCodeCamp Logo](https://cdn.freecodecamp.org/testable-projects-fcc/images/fcc_secondary.svg)
`;

How to assemble my three reactJS files in order to put them in JS part of codePen ?

For a multi-file project like this I prefer platforms like CodeSandbox, StackBlitz, etc.

2 Likes

Add all the external imports needed at the top (not component imports). Then add all the components without any import/exports.


I’d also suggest using StackBlitz or CodeSandbox for React.

For the freeCodeCamp challenges you can use the StackBlitz Vite React starter template (there are some issues with other templates and our test script).

Or fork this starter with the test script already added.

1 Like

I will study stackblitz later.

For now this is what I did. It’s the first time for me for this kind of manipulations. My aim is to put my VScode projects in codePen or codeSandBox in order to share them.

So in CodePen I have a layout problem. The columns should be next to each other.
https://codepen.io/ALL9000/pen/YzeJZda

And in codeSandbox that’s no work for now while there isn’t error in the console :thinking:
https://codesandbox.io/s/wonderful-taussig-0jw14s

Can you help me ?

Both works in same maner now, but why the result appeared bellow the textarea ?

This is the result with my VScode file :
image

There is really nothing to study, just use StackBlitz.

StackBlitz pretty much works the same as CodeSandbox but it will work with the test script which CodeSandbox will not.

As for the marked import on CodeSandbox it should just be.

import { marked } from 'marked'

Edit: you didn’t link to the actual Codepen you have.

I will try with StackBlitz now.

this is stackblitz one but problem is same :thinking:
https://stackblitz.com/edit/react-ts-nc7wjw?file=sampleText.tsx

With codePen that’s works now. The bootstrap cdn wasn’t recorded.
https://codepen.io/ALL9000/pen/YzeJZda?editors=0010
How to add Bootstrap with codeSandbox and stackblitz ?

You didn’t add Bootstrap. You can just link to it in the HTML file.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

look in this link they add bootstrap and react-bootstrap with :
import “bootstrap/dist/css/bootstrap.min.css”;

https://stackblitz.com/edit/using-react-bootstrap-in-react-app?file=index.js

My codeSandbox work now. I added Bootstrap and react-bootstrap then
import "bootstrap/dist/css/bootstrap.min.css";

https://codesandbox.io/s/wonderful-taussig-0jw14s?file=/src/index.js

My stackblits also now :
https://stackblitz.com/edit/react-ts-2trad6?file=App.tsx,index.tsx

thanks for your help :wink:

thanks for your help also :wink:

Sure, you can import it as well if you add it as a dependency. Whatever way works for you is fine.

It will break if you add the freeCodeCamp test script so you can’t test it using CodeSandbox and the project you submit also should have the test script included.

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>